<template>
	<view>
		<view class="status_bar"></view>
		
		<view class="container">
			<view class="user-mes" v-if="!isLogin">
				<view class="headPortrait"><image src="../../static/dog/2.jpg" mode="aspectFill"></image></view>
				<!-- <button type="default">登录</button> -->
				<button class="round bg-blue shadow" @tap="goLogin">登录</button>
			</view>
			<view class="user-mes" v-if="isLogin">
				<view class="headPortrait"><image :src="userInfo.avatarUrl" mode="widthFix"></image></view>
				<view class="user-nickname">{{userInfo.nickName}}</view>
			</view>
			
			<view class="cu-list menu sm-border card-menu margin-top">
				<view class="cu-item arrow" @tap="goOpen" data-url="/pages/setting/uploadList">
					<view class="content">
						<text class="cuIcon-upload text-grey"></text>
						<text class="text-grey">我的上传</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="goOpen" data-url="/pages/my/collect">
					<view class="content">
						<text class="cuIcon-favor text-grey"></text>
						<text class="text-grey">我的收藏</text>
					</view>
				</view>
			</view>
			
			<view class="cu-list menu sm-border card-menu margin-top">
				<view class="cu-item arrow" @tap="showModal">
					<view class="content">
						<text class="cuIcon-weixin text-grey"></text>
						<text class="text-grey">交个朋友</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<button class="cu-btn content" open-type="share">
						<text class="cuIcon-forwardfill text-grey"></text>
						<text class="text-grey">分享给好友</text>
					</button>
				</view>
				<view class="cu-item arrow">
					<button class="cu-btn content" open-type="contact">
						<text class="cuIcon-servicefill text-grey"></text>
						<text class="text-grey">和Ta聊聊</text>
					</button>
				</view>
				<view class="cu-item arrow" @tap="openCode">
					<view class="content">
						<text class="cuIcon-appreciatefill text-grey"></text>
						<text class="text-grey">赞赏一下</text>
					</view>
				</view>
			</view>
			
			<view class="cu-modal" :class="isModel ? 'show' : ''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">温馨提示</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						Ta微信号：XGF1097909351
					</view>
					<view class="cu-bar bg-white">
						<view class="action margin-0 flex-sub text-green solid-left" @tap="copyWX">复制微信号</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				isLogin:false,
				isModel:false
			}
		},
		onShow() {
			let token = uni.getStorageSync('loginStatus').token;
			if(token){
				this.isLogin = true;
				// 判断是否存储个人信息
				if(!uni.getStorageSync('userInfo').userInfo){
					this.geUserInfo();
				}else{
					this.userInfo = uni.getStorageSync('userInfo').userInfo;
				}
			}
		},
		/**
		 * @author smallfour
		 * @description 分享好友
		 */
		onShareAppMessage(res){
			return {
				title:'四叶图集',
				imageUrl:'http://image.hermit.love/IMG_3494.JPG',
				path:'/pages/tabBar/index'
			}
		},
		/**
		 * @author smallfour
		 * @description 分享朋友圈
		 */
		onShareTimeline(){
			return {
				title:'四叶图集',
				imageUrl:'http://image.hermit.love/IMG_3494.JPG',
				path:'/pages/tabBar/index'
			}
		},
		methods: {
			goNoOpen:function(){
				this.msg('暂未上线');
			},
			/**
			 * @author smallfour
			 * @description 去登陆
			 */
			goLogin:function(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			/**
			 * @author smallfour
			 * @description 
			 */
			goOpen:function(e){
				let token = uni.getStorageSync('loginStatus').token;
				if(!token){
					this.goLogin();
					return;
				}
				uni.navigateTo({
					url: e.currentTarget.dataset.url
				})
			},
			/**
			 * @author smallfour
			 * @description 获取个人信息
			 */
			geUserInfo:function(){
				this.$api.getUserMes({}).then(res => {
					if(res.code == 200){
						this.userInfo = res.data;
						uni.setStorage({
							key:"userInfo",
							data:{
								userInfo:res.data
							}
						})
					}
				})
			},
			
			/**
			 * @author smallfour
			 * @description 打开赞赏码
			 */
			openCode:function(){
				let imageArr = ['http://www.hermit.love/images/admireCode.jpg']
				uni.previewImage({
					urls: imageArr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			copyWX:function(){
				let that = this;
				uni.setClipboardData({
				    data: 'XGF1097909351',
				    success: function () {
						that.showToast('复制成功')
				    }
				});
			},
			showModal:function() {
				this.isModel = true;
			},
			hideModal:function(){
				this.isModel = false;
			},
			// toast 提示框
			showToast:function(title){
				uni.showToast({
					title: title,
					icon: 'none',
					duration: 2000
				})
			}
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);  
		width: 100%;
	}
	
	.user-mes{
		text-align: center;
		margin: 30rpx 0;
	}
	.headPortrait{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
	}
	.headPortrait image{
		width: 100%;
		height: 100%;
	}
	.user-nickname{
		font-size: 40rpx;
		margin: 10rpx 0 60rpx;
	}
	.user-mes button{
		/* background-color: initial!important; */
		overflow: initial!important;
		width: 240rpx;
		font-size: 24rpx;
		padding: 4rpx 0;
		margin: 30rpx auto;
	}
	.user-mes button::after{
		border: none!important;
	}
</style>
